<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<canvas id="mycanvas" width="500px" height="500px" style="border:1px solid #ccc"></canvas>

</body>
</html>

<script type="text/javascript">
	var canvas = document.getElementById("mycanvas");
	var context = canvas.getContext("2d");
	var g1 = context.createLinearGradient(0,0,0,500);/*横坐标不变，纵坐标发生改变*/
	g1.addColorStop(0,"rgb(255,255,0)");
	g1.addColorStop(1,"rgb(0,255,255)");
	context.fillStyle = g1;
	context.fillRect(0,0,400,400)
	/*渐变圆：*/
	var g2 = context.createLinearGradient(0,0,400,0);
	g2.addColorStop(0,"rgba(255,0,0,0.5");
	g2.addColorStop(1,"rgba(0,0,255,0.5");
	context.fillStyle = g2;
	for (var i = 1; i < 10; i++) {
		context.beginPath();
		context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
		context.closePath();//闭合
		context.fill()//加入
			}
</script>